<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
    <title>小米</title>
</head>
<style>
    #app {
        width: 1318px;
        background-color: #f5f5f5;
        height: 750px;
        margin: auto;
    }

    a {
        text-decoration: none;
    }

    .box1 {
        width: 1318px;
        height: 58px;
    }

    .title {
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333;
        float: left;
        padding: 0 15px;
    }

    .more {
        float: right;
        font-size: 16px;
        line-height: 58px;
        color: #424242;
        margin-right: 15px;
    }

    .box1>a:hover {
        color: #ff7700;
    }
    .phonelist{
        height: 614px;
        float: right;
    }
    ul{
        width: 1020px;
        height: 280px;
        margin-left: -50px;
        margin-right: 20px;
    }
    li {
        list-style: none;
        width: 234px;
        height: 300px;
        margin-left: 20px;
        text-align: center;
        background-color: #fff;
        float: left;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .phone-img{
        margin-top: -10px;
    }
    .phone-title {
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 14px;
        font-weight: 400;
        color: #333;
    }

    .phone-des {
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 0 10px 10px;
        height: 18px;
        font-size: 12px;
        color: #b0b0b0;
        margin-top: -5px;
    }

    .phone-price {
        margin: 0 10px 10px;
        text-align: center;
        color: #ff6700;
        margin-top: -5px;
    }
</style>

<body>
    <div id="app">
        <div class="box1">
            <h2 v-html="title" class="title"></h2>
            <a href="" v-html="more" class="more"></a>
        </div>
        <div class="phoneImg" style="float: left;">
            <img src="imgs/d91bb6cf7da0947e8a6e50e03f4daf06.webp" alt="" style="margin: 20px 20px 20px -50px;width: 234px;height: 614px;">
        </div>
        
        <div class="phonelist">
            <ul>
                <li class="phone" v-for="phonelist in phoneList" :key="phoneList">
                    <image v-bind:src="phonelist.img" class="phone-img">
                    <p class="phone-title">{{phonelist.title}}</p>
                    <p class="phone-des">{{phonelist.des}}</p>
                    <p class="phone-price">{{phonelist.price}}</p>
                </li>
            </ul>
        </div>
    </div>
    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    title: "手机",
                    more: "查看更多",
                    phoneList: [
                        { id: "", img: "imgs/phone1.webp", title: "Redmi 12C", des: "高性能长续航，5000万像素超清双摄", price: "699元起" },
                        { id: "", img: "imgs/phone2.webp", title: "Redmi K60", des: "骁龙8+｜2K 高光直屏｜5500mAh+67W闪充", price: "2499元起" },
                        { id: "", img: "imgs/phone3.webp", title: "Redmi K60 Pro", des: "【第二代骁龙8】狂暴引擎", price: "3299元起" },
                        { id: "", img: "imgs/phone4.webp", title: "Redmi Note 12 Pro 极速版", des: "高通骁龙778G，OLED柔性直屏+一亿像素", price: "2499元起" },
                        { id: "", img: "imgs/phone5.webp", title: "XiaoMi 13 限量定制色", des: "全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头", price: "4999元起" },
                        { id: "", img: "imgs/phone6.webp", title: "XiaoMi 13 Pro", des: "全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 2K 专业原色屏｜120W小米澎湃秒充 ｜徕卡75mm长焦镜头", price: "4999元起" },
                        { id: "", img: "imgs/phone7.webp", title: "XiaoMi 13", des: "全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头", price: "3999元起" },
                        { id: "", img: "imgs/phone8.webp", title: "Redmi Note 12 5G", des: "三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量", price: "1199元起" },
                    ]

                }
            }
        }).mount('#app')
    </script>
</body>

</html>